<template>
	<div @click="show = false">
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="code m1280 f f-a-c f-j-b">
			<span>{{ name }}</span>
			<div class="imgBox hand f f-a-c f-j-c">
				<img @click.stop="show = !show" src="/src/assets/geng.png" alt="" />
				<div v-show="show" class="rename">
					<div @click.stop="listVisible = true" class="topName">Rename</div>
					<div @click.stop="listVisibleDet = true" class="delete">Delete</div>
				</div>
			</div>
		</div>
		<div class="avart m1280 f f-a-c">
			<img :src="obj.avatar || '/src/assets/tou.png'" alt="" />
			<div class="nameBox">
				<div class="name">{{ obj.firstName || "-" }} {{ obj.lastName || "-" }}</div>
				<div class="time">{{ formatTimestamp(obj.lastLogin) }} {{ total }} articles</div>
			</div>
		</div>
		<div class="box m1280">
			<div v-for="(item, index) in list" :key="index" @click="goDetils(item)" class="hand item f f-a-c f-j-b">
				<div class="lef">
					<div class="topAva f f-a-c">
						<img :src="item.articleAndUser.avatar" alt="" />
						<div class="f f-a-c">
							<div class="name">{{ item.articleAndUser.clubName }}</div>
							<div class="time">{{ formatTimestamp(item.articleAndUser.publishTime) }}</div>
						</div>
					</div>
					<div class="title">{{ item.articleAndUser.title }}</div>
					<div class="count">
						{{ item.articleAndUser.description }}
					</div>
					<div class="bot f f-a-c f-j-b">
						<div class="tagsLef f f-a-c">
							<div v-for="(ite, ind) in item.articleAndUser.tags" :key="ind" class="data">{{ ite }}</div>
						</div>
						<div class="rigIcon f f-a-c">
							<!-- <img style="width: 18px; height: 18px" @click.stop="ficle(item.articleAndUser)" class="hand" v-if="item.articleAndUser.isJoinArticle == 0" src="/src/assets/page/1.png" alt="" /> -->
							<img style="width: 18px; height: 18px" @click.stop="cancelCollections(item.articleAndUser)" class="hand" src="/src/assets/page/01.png" alt="" />
							<img @click="copyLoca" class="img1" src="/src/assets/page/6.png" alt="" />
						</div>
					</div>
				</div>
				<div class="shoopImg"><img :src="item.articleAndUser.image || ''" alt="" /></div>
			</div>
			<div style="margin-bottom: 60px; margin-top: 60px" class="hand">
				<div class="example-pagination-block f f -a-c f-j-c">
					<el-pagination @size-change="sizeChange" :default-page-size="10" @current-change="currentChange" layout="prev, pager, next" :total="total" />
				</div>
			</div>
		</div>
		<!-- 下面的列表 -->
		<div class="people m1280">People also view</div>
		<div class="peopleBox m1280 f f-a-c f-w-w">
			<div v-for="(item, index) in botLists" @click="goDetilsss(item)" :key="index" class="peopItem">
				<div class="topImg">
					<img :src="item.clubImages" alt="" />
				</div>
				<div class="avart f f-a-c f-j-b">
					<div class="ava f f-a-c">
						<img :src="item.avatar" alt="" />
						<div class="name">{{ item.userName }}</div>
					</div>
					<!-- {{ dayjs(item.createTime).format("DD/MM/YYYY") }} -->
					<div class="time">{{ formatTimestamp(item.createTime) }}</div>
				</div>
				<div class="title">{{ item.clubName }}</div>
				<div v-html="item.description" class="counts"></div>
				<div class="bot f f-a-c f-j-b">
					<div class="tagsLef f f-a-c">
						<div v-for="(its, ins) in item.tags" :key="ins" class="data">{{ its }}</div>
						<div class="data">Data</div>
					</div>
					<div class="rigIcon f f-a-c">
						<img style="width: 18px; height: 18px" @click.stop="ficle(item, 2)" class="hand" v-if="item.favorite == 0" src="/src/assets/page/1.png" alt="" />
						<img style="width: 18px; height: 18px" @click.stop="cancelCollection(item, 2)" class="hand" v-else src="/src/assets/page/01.png" alt="" />
						<img @click.stop="copyLoca" class="img1 hand" src="/src/assets/page/6.png" alt="" />
					</div>
				</div>
			</div>
		</div>
		<userModule @initObj="initObj" @initGigs="initGigs" ref="addRef" />
		<!-- 添加 -->
		<el-dialog v-model="listVisibles" title="" width="540">
			<div class="dialogTitle">Rename list</div>
			<div class="nameDia">List name</div>
			<input type="text" v-model="listValue" class="dialogInp" name="" id="" />
			<div class="diolBtn f f-a-c">
				<div class="add hand">Save</div>
			</div>
		</el-dialog>
		<!-- 删除 -->
		<el-dialog v-model="listVisibleDet" title="" width="540">
			<div class="dialogTitleDelete">Delete this list？</div>
			<div class="dialogTitCount">The deleted content cannot be recovered</div>
			<div class="dialogBtn f f-a-c f-j-b">
				<div @cick="listVisibleDet = false" class="lefBtn hand">Cancel</div>
				<div @click="delZu" class="rigBtn hand">Delete</div>
			</div>
		</el-dialog>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import UserModule from "./userModule.vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import {
		ClubCollectionList,
		CancelCollectionClub,
		BuyUserinfo,
		UpdataFavorites,
		DisplaySellerInformation,
		InspireByTrendsss,
		CancelCollectionArtic,
		UngroupFavorites,
		ArticleFavoritesList
	} from "@/api/knowClub/index.js";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { copy, formatTimestamp } from "@/utils/setting.js";
	import { ElMessage, dayjs } from "element-plus";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let show = ref(false);
	let route = useRoute();
	// 卖家买家
	let ind = localStorage.getItem("ind");
	let userIdKc = JSON.parse(localStorage.getItem("logininfo") || "{}").userIdKc;
	let id = route.query.id;
	let name = route.query.name;
	let pageNum = ref(1);
	let list = ref([]);
	let listValue = ref("");
	let botLists = ref([]);
	let total = ref(0);
	let num = ref(1);
	let pageSize = ref(10);
	let obj = ref({});
	let listVisible = ref(false);
	let addRef = ref(null);
	let listVisibleDet = ref(false);
	onMounted(() => {
		getUserInfo();
		getList();
		botList();
		window.addEventListener("scroll", handleScroll);
	});
	// 去详情
	const goDetils = item => {
		router.push({
			path: "/ClubDetils",
			query: {
				id: item.favoriteId
			}
		});
	};
	const goDetilsss = item => {
		router.push({
			path: "/Club",
			query: {
				id: item.id
			}
		});
	};
	const delZu = async () => {
		let n = await UngroupFavorites({ id: id });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			setTimeout(() => {
				router.go(-1);
			}, 1000);
		}
	};
	// 更新分组
	const updataZu = async () => {
		let n = await UpdataFavorites({
			id: id,
			name: listValue.value
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			name = listValue.value;
		}
	};
	const botList = async () => {
		let n = await InspireByTrendsss();
		botLists.value = n.data.list;
	};
	// 获取用户信息
	const getUserInfo = async () => {
		if (ind == 3 || ind == 6) {
			// 表示买家
			let n = await BuyUserinfo();
			obj.value = n.data;
		} else if (ind == 2 || ind == 5) {
			// 卖家
			let n = await DisplaySellerInformation({ userId: userIdKc || "" });
			obj.value = n.data;
		}
	};
	// ============================================================================================
	// 点击收藏
	const ficle = async (item, nums = 1) => {
		num.value = nums;
		console.log(item, "99999999999");
		if (nums == 2) {
			// 表示俱乐部
			addRef.value.type = 3;
		} else {
			addRef.value.type = 2;
		}
		// 执行获取列表
		await addRef.value.initList();
		addRef.value.clubId = item.id;
		addRef.value.dialogTableVisible = true;
	};
	// 点击取消收藏俱乐部
	const cancelCollection = async (item, nums = 1) => {
		if (nums == 2) {
			// 表示俱乐部
			addRef.value.type = 3;
		} else {
			addRef.value.type = 2;
		}
		num.value = nums;
		let n = await CancelCollectionClub({
			clubId: item.id
		});
		if (n.code == 200) {
			// 更新
			getList();
			if (num.value == 2) {
				botList();
			}
		}
	};
	// 点击取消收藏文章
	const cancelCollections = async (item, nums = 1) => {
		let n = await CancelCollectionArtic({
			articleId: item.id
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
			// 更新
			getList();
		}
	};
	const copyLoca = () => {
		const text = window.location.href;
		copy(text);
	};
	const initGigs = () => {
		// 更新
		getList();
		if (num.value == 2) {
			botList();
		}
	};
	const initObj = () => {
		// 更新
		getList();
		if (num.value == 2) {
			botList();
		}
	};

	// ============================================================================================
	const getList = async () => {
		let n = await ArticleFavoritesList({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			groupId: id
		});
		total.value = n.data.total;
		list.value = n.data.list;
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "1111111");
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
